<template>
  <div>
    <v-touch class="swiper-div" @swiperight="onSwiperRight" :swipe-options="{direction: 'horizontal'}">
      <div class="scanner-content">
        <div class="scanner-cancel" @click="cancel">
          <img class="img-40" src="@/static/icon/40px_cancel.png" alt=""/>
        </div>
        <div v-if="showScanner" class="scanner-div" id="code"></div>
      </div>
    </v-touch>
  </div>
</template>

<script>
import {Toast} from "vant";

let scan = null;
export default {
  name: "ProductViewScanner",
  components: {},
  data() {
    return {
      showScanner: true,
      scan: Object,
    }
  },
  mounted() {
    this.startRecognize()
  },
  methods: {
    cancel() {
      this.cancelScan()
      this.$router.push(String(this.$route.query.srcUrl))
    },
    // H5调用扫描功能
    startRecognize () {
      if (!window.plus) {
        document.addEventListener('plusready', self.plusReady, false)
      }
      // eslint-disable-next-line no-undef
      const filter = [plus.barcode.CODE128, plus.barcode.EAN8, plus.barcode.EAN13]
      // eslint-disable-next-line no-undef
      scan = new plus.barcode.Barcode('code', filter)
      scan.onmarked = this.onMarked
      scan.onerror = this.onError
      setTimeout(() => {this.startScan()} ,1000);
    },
    startScan(){
      scan.start();//开始调用系统摄像头获取图片数据进行扫描识别，当识别出条码数据时通过onmarked回调函数返回。
    },
    cancelScan(){
      scan.close();//还是觉得用关闭代替取消比较合适
    },
    onMarked(type, result) {
      switch (type) {
          // eslint-disable-next-line no-undef
        case plus.barcode.QR:
          type = 'QR';
          break;
          // eslint-disable-next-line no-undef
        case plus.barcode.CODE128:
          type = 'CODE128';
          break;
          // eslint-disable-next-line no-undef
        case plus.barcode.EAN13:
          type = 'EAN13';
          break;
          // eslint-disable-next-line no-undef
        case plus.barcode.EAN8:
          type = 'EAN8';
          break;
        default:
          type = '其它' + type;
          break
      }
      this.doAct(result)
    },
    onError(error){
      Toast('扫码失败：'+error.message);
    },
    doAct(result) {
      Toast(result)
      if (result) {
        result = result.replace(/\n/g, '')
        Toast(result)
        const queryType = this.$route.query.type ? this.$route.query.type : 1
        //这里写扫码结束后 自己的逻辑
        let path = Number(queryType) === 1 ? this.GLOBAL.pathSetting.product.search : this.GLOBAL.pathSetting.product.choose
        scan.close()
        path = path + '?productCode=' + result
        this.$router.push(path)
      } else {
        this.cancelScan()
        this.startRecognize()
      }
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  }

}
</script>
<style scoped>
.scanner-content {
  width: 100%;
  height: 100vh;
  background-color: #242424;
  opacity: 0.8;
}
.scanner-cancel {
  margin-left: 24px;
  padding-top: 68px;
  width: 40px;
  height: 40px;
}
.scanner-div {
  width: 327px;
  height: 327px;
  margin: 80px 24px auto 24px;
  background: #FFF;
}
</style>
